<template>
  <div class="manageCollect" v-if="collect.recipe" @click="choose">
    <div class="choose" :class="{ isChoose: isChoose }">
      <van-icon v-if="!isChoose" name="circle" color="#cecece" size="25" />
      <van-icon v-else name="success" size="20" />
    </div>
    <div class="index">
      <div
        class="left"
        :style="{
          backgroundImage: `url(${collect.recipe.thumb_path})`,
        }"
      ></div>
      <div class="right">
        <div class="title">{{ collect.recipe.title }}</div>
        <div class="views_count">
          {{ collect.recipe.views_count_text }}
        </div>
        <div class="avatarBox">
          <div class="avatar">
            <van-image
              round
              width="18px"
              height="18px"
              :src="collect.recipe.user.user_photo"
              lazy-load
            />
          </div>
          <div class="nickname">{{ collect.recipe.user.nickname }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import axios from "axios";
import { onMounted, ref, type Ref } from "vue";
import { storeToRefs } from "pinia";
import { useDouguoStore } from "@/stores/douguo";
const douguo = useDouguoStore();

const { choosed } = storeToRefs(douguo);
const { updataChoosed } = douguo;

const props = defineProps(["item"]);

const isChoose: Ref<boolean> = ref(false);

const collect: Ref<object> = ref({});

onMounted(async () => {
  // console.log(props.item);

  let res = await axios.get(
    `https://apis.netstart.cn/douguo/recipe/detail/${props.item}`
  );
  // console.log(res.data.result.recipe);
  collect.value = res.data.result;
});

const choose = () => {
  updataChoosed(props.item);
  isChoose.value = !isChoose.value;
};
</script>

<style lang="scss" scoped>
.manageCollect {
  display: flex;
  align-items: center;
  margin-bottom: 16px;

  .choose {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
  }

  .isChoose {
    background-color: #ffb31a;
  }

  .index {
    display: flex;
    align-items: center;
    margin-left: 16px;

    .left {
      height: 122px;
      width: 174px;
      flex-shrink: 0;
      border-radius: 10px;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }

    .right {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-left: 10px;

      .title {
        font-size: 14px;
        margin-bottom: 8px;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .views_count {
        font-size: 12px;
        margin-bottom: 10px;
      }

      .avatarBox {
        display: flex;
        align-items: center;

        .avatar {
          height: 18px;
          width: 18px;
          margin-right: 5px;
        }

        .nickname {
          font-size: 14px;
          color: #999;
          line-height: 18px;
        }
      }
    }
  }
}
</style>
